<template>
  <div ref="mdRef">
    <div v-html="mdContent"></div>
  </div>
</template>

<script setup lang="ts">
import MarkdownIt from "markdown-it";
import hljs from 'highlight.js'
import mila from "markdown-it-link-attributes";

const props = defineProps<{
  content: string;
  inline?: boolean;
  linkify?: boolean;
}>();

const mdi = new MarkdownIt({
  html: true,
  linkify: props.linkify,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre><code class="hljs code-block-body">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
      } catch (__) { }
    }

    return '<pre><code class="hljs">' + mdi.utils.escapeHtml(str) + '</code></pre>';
  }
});

mdi.use(mila, {
  target: "_blank",
  rel: "noopener",
});

const mdContent = computed(() => {
  return props.inline ? mdi.renderInline(props.content) : mdi.render(props.content);
});

</script>

<style lang="scss">
.code-block-body {
  padding: 16px;
  background-color: #eee;
  border-radius: 8px;
}
</style>